<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
import ViewShedStage from '@/lib/ViewShed.js'
export default {
    name: 'ViewShed',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            window.viewer.screenSpaceEventHandler.setInputAction(async function onLeftClick(movement) {
                // 获取鼠标点击位置的屏幕坐标
                var position = movement.position;
                let pickPosition = window.viewer.scene.pickPosition(position)
                let clampTerrainPosition = window.viewer.scene.clampToHeight(pickPosition)

                console.log(clampTerrainPosition)

            }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
            window.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: '/model/Tileset/JN-WhiteModel/tileset.json'
            }));

            window.viewer.camera.setView({
                destination: {
                    "x": -2331056.0273690308,
                    "y": 4563273.390988787,
                    "z": 3786062.3190302034
                },
                orientation: {
                    heading: 0.5168861241825802,
                    pitch: -0.5115656193038052,
                    roll: 0.000032373724042855656
                }
            })

            new ViewShedStage(window.viewer, {
                viewPosition: {
                    "x": 308777.7481062392,
                    "y": 5643065.731441431,
                    "z": 2957896.7712047044
                },
                viewPositionEnd: {
                    "x": 313367.6386945475,
                    "y": 5644937.86296947,
                    "z": 2956499.425284609
                },
                enabled: true,
                softShadows: true
            })

        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  